<!--
 * @Author: your name
 * @Date: 2021-11-02 10:20:41
 * @LastEditTime: 2021-11-12 18:21:29
 * @LastEditors: Please set LastEditors
 * @Description: 添加艺人
 * @FilePath: \star-cat-h5\src\views\artist\add.vue
-->
<template>
  <div class="artist_add yhd">
    <van-sticky>
      <TopSteps :current="editArtistCurrent" />
    </van-sticky>
    <div class="content_box">
      <transition name="slide-fade">
        <component class="" :is="from[editArtistCurrent].el"></component>
      </transition>
    </div>
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
  </div>
</template>

<script>
import TopSteps from "./components/TopSteps";
import { mapGetters } from "vuex";
export default {
  components: {
    TopSteps,
    Anchor: () => import("./Anchor"),
    Artist: () => import("./Artist"),
    Business: () => import("./Business"),
  },
  computed: {
    ...mapGetters(["editArtistCurrent"]),
  },
  data() {
    return {
      from: [
        { val: 1, el: "Artist" },
        { val: 2, el: "Anchor" },
        { val: 3, el: "Business" },
      ],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.artist_add {
  background-color: #f8f8fb;
  /* width: 100vw; */
  min-height: 100vh;
}
.content_box {
  margin-top: 8px;
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}
.slide-fade-leave-to{
  transform: translateX(-10px);
}
</style>